<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>es6块作用域let和var</title>
</head>
<body>
<div id="app">
  <button>点击一下0</button>
  <button>点击一下1</button>
  <button>点击一下2</button>
  <button>点击一下3</button>
  <button>点击一下4</button>

  <br>
  <a href="#">点击一下0</a>
  <a href="#">点击一下1</a>
  <a href="#">点击一下2</a>
  <a href="#">点击一下3</a>
  <a href="#">点击一下4</a>

  <br>
  <span style="cursor:pointer">点击一下0</span>
  <span style="cursor:pointer">点击一下1</span>
  <span style="cursor:pointer">点击一下2</span>
  <span style="cursor:pointer">点击一下3</span>
  <span style="cursor:pointer">点击一下4</span>
</div>

<script src="../js/vue.js"></script>
<script>
  /*
    ■es5和es6中var和let的区别：
      es5中的var是没有块级作用域的，es6中的let是具有块级作用域的

    ■const的含义与使用：
      const修饰常量，表示不可被修改，只在初始化时进行一次赋值，const必须在定义时进行初始化
      const修饰的对象不能改变，但是对象内部的属性可以被改变，学过java的都知道
      在es6中，优先使用const，只有在需要改变某一个标识符的时候才用let
   */

  //这段代码就是var指明的变量没有作用域的体现，按理说time在if的外部是不可以打印和不可以修改，但是这里却可以修改和打印，这就是没有作用域的体现
  //学过java等其他编程语言的就应该知道这会造成代码污染，出现不可预测的风险
  if (true) {
    var time = "2017"
  }
  console.log(time)
  {
    time = "2018"
  }
  console.log(time)

  //此段代码会引起什么问题呢，当你点击以上任何按钮时都只会打印 "第5个按钮被点击"，
  //为什么会造成这种情况呢，var声明的变量是在for是没有作用域的，也就是说这个i这个变量并不是只作用于for循环当中，
  //那么循环执行的时候，i这个变量就会被更改，那么最后点击事件回调的时候就会出现i已经变成5了，所以所有的按钮点击回调console.log
  //打印就会打印i的最终值，一般其他编程语言，都是在for循环这种局部作用时，相当于每次都在for内部定义一个i，每个i都是不同的值，
  //而局部的变量因为作用域的原因不会对其他的相同局部变量造成影响，而这里var因为因为没有作用域，参考上卖弄上面的代码，外部或者其他代码块依然会
  //更改之前局部变量的值，所以这里执行到最后，这个i值就被改为了5
  var btns = document.getElementsByTagName("button");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
      console.log("var第" + i + "个按钮被点击");
    })
  }

  //这种闭包的方式可以解决问题，因为函数是一个作用域
  var aHs = document.getElementsByTagName("a");
  for (var i = 0; i < aHs.length; i++) {
    (function (number) {
      aHs[i].addEventListener("click", function () {
        console.log("var闭包第" + number + "个按钮被点击");
      })
    })(i)
  }

  //let声明的变量是有作用域的，可以解决var遇到的问题，所以这里打印会按照点击按钮的编号打印符合预期的结果
  const spanElements = document.getElementsByTagName("span");
  for (let i = 0; i < spanElements.length; i++) {
    spanElements[i].addEventListener("click", function () {
      console.log("let第" + i + "个按钮被点击");
    })
  }

</script>
</body>
</html>